<template>
    <div class="demo"> 
        <h5>html上的ref标签</h5>
        <h6 ref="dom">获取html上的dom</h6>
        <button @click="showDom">展示dom</button>
        <hr/>
        <h5>组件上的ref标签</h5>
        <Demo ref="com"/>
        <button @click="showCom">展示object</button>
        <hr/>
        
        
    </div>
    
</template>
<!---
1.ref标签
a.html上的ref
b.组件上的ref

2.TS接口与泛型
-->

<script lang="ts" setup>
    import {ref,reactive} from 'vue'
    import Demo from '../../components/Demo.vue'

    
    //html上的ref
    const dom = ref()
    const showDom = () => {
        console.log(dom.value)
    }
    //组件上的ref
    const com = ref()
    function showCom() {
        //获取子组件传来的数据
        console.log(com.value)
        console.log(com.value.person)
        console.log(com.value.person.name)
        console.log(com.value.a)

    }
 
/********************TS接口与泛型***************************/
//引入接口文件
import {type PersonInterface,type PersonLists} from '../../types'

let person:PersonInterface ={id: 1,name: '张三',age: 18}

let persons:Array<PersonInterface> =[
    {id: 1,name: '张三',age: 18},
    {id: 2,name: 'lisi',age: 33},
    {id: 3,name: '王五',age: 44},
    {id: 4,name: '赵六',age: 2},
]

let personList:PersonLists =[
    {id: 1,name: '张三',age: 18},
    {id: 2,name: 'lisi',age: 33},
    {id: 3,name: '王五',age: 44},
    {id: 4,name: '赵六',age: 2},
]
    
    



</script>

<style scoped>
    .demo {
        background-color: pink;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 550px;
        margin: 10px;
    }
    button  { 
        margin: 5px 5px;

    }

</style>